<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        *{padding: 0;margin: 0;}
        a{}
        li{}

        .nav a{
            display: inline-block;
            width: 100px;
            /* margin: 0 20px; 最合理的方法 */
        }
        .nav{
            display: inline-block;
        }
        .login{
            display: inline-block;
            margin-left: 300px;
        }
        .set ul{
            display: none;
        }
        /* + 相邻兄弟选择器 */
        /* .set div:hover+ul{
            display: block;
        } */
        .set:hover ul{
            /* display的值只要不是none，就会显示 */
            display: block;
        }
        /* >: 子选择器 */
        .content > div{}
        /* ,: 群组选择器 */
        .sider,.code{

        }
    </style>
</head>
<body>
    <div class="header">
        <img src="" alt="">
        <a href=""></a>
    </div>
    <div class="content">
        <div class="sider"></div>
        <div class="code">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="set">
        <div>设置</div>
        <ul >
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
    <div class="nav">
        <a href="">首页</a>
        <a href="">新闻</a>
        <a href="">视频</a>
    </div>
    <div class="login">
        <button>登录</button>
        <a href="">设置</a>
    </div>
    <!-- p标签不要再嵌套p标签或h标签或其他块级元素-->
    <p>一个<span style="color: #f00;">Web开发</span>工程师</p> 
</body>
</html>